<template>
  <div class="employee">
    <module
      ref="module"
      :moduleType="todayEmployee.moduleType"
      :borderConfig="todayEmployee.borderConfig"
      :moduleConfig="todayEmployee.moduleConfig"></module>
    <module
      ref="module1"
      :moduleType="monthEmployee.moduleType"
      :borderConfig="monthEmployee.borderConfig"
      :moduleConfig="monthEmployee.moduleConfig"></module>
    <module
      ref="module2"
      :borderConfig="employeeMonth.borderConfig"
      :moduleConfig="employeeMonth.moduleConfig"></module>
    <module
      ref="module3"
      :borderConfig="responseMonth.borderConfig"
      :moduleConfig="responseMonth.moduleConfig"></module>
    <module
      ref="module4"
      :borderConfig="overRateMonth.borderConfig"
      :moduleConfig="overRateMonth.moduleConfig"></module>
    <module
      ref="module5"
      :borderConfig="employeeOrgan.borderConfig"
      :moduleConfig="employeeOrgan.moduleConfig"
      :isShowDimension="employeeOrgan.isShowDimension"></module>
    <module
      ref="module6"
      :borderConfig="responseOrgan.borderConfig"
      :moduleConfig="responseOrgan.moduleConfig"
      :dimensionArr="responseOrgan.dimensionArr"
      :isShowDimension="responseOrgan.isShowDimension"></module>
    <module
      ref="module7"
      :borderConfig="overRateOrgan.borderConfig"
      :moduleConfig="overRateOrgan.moduleConfig"
      :isShowDimension="overRateOrgan.isShowDimension"></module>
  </div>
</template>

<script>
import module from '../components/SecondaryModule'
import { changeBarData, separateData } from './../../utils/index'
export default {
  components: {
    module
  },
  computed: {
    organId () {
      return this.$store.state.organId
    }
  },
  name: 'employee',
  data () {
    return {
      // 今日工单类型配置
      todayEmployee: {
        moduleType: 'pie',
        borderConfig: {
          moduleType: '2x1',
          icon: '',
          titleText: '今日工单类型',
          ref: 'todayEmployee'
        },
        moduleConfig: {
          optionsConfig: {
            isUseValue: true,
            value: [],
            labelLine: {
              normal: {
                length: 30,
                length2: 20
              }
            },
            legend: []
          },
          legendList: [],
          legendDirection: 'vertical'
        }
      },
      // 本月工单类型配置
      monthEmployee: {
        moduleType: 'pie',
        borderConfig: {
          moduleType: '2x1',
          icon: '',
          titleText: '本月工单类型',
          ref: 'monthEmployee'
        },
        moduleConfig: {
          optionsConfig: {
            isUseValue: true,
            labelLine: {
              normal: {
                length: 30,
                length2: 20
              }
            },
            value: [],
            legend: []
          },
          legendList: [],
          legendDirection: 'vertical'
        }
      },
      // 工单数量趋势配置
      employeeMonth: {
        borderConfig: {
          titleText: '工单数量趋势',
          moduleType: '43x1',
          ref: 'employeeMonth'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisDataType: 2 // X轴坐标从1月份开始
            },
            yAxis: {
              minInterval: 10
            },
            tooltipsConfig: {
              // symbol: '万元',
              isNamePreposition: false,
              tipsMessage: '员工报单'
            },
            grid: {
              top: 40
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 0 }, { name: new Date().getFullYear(), colorIndex: 1 }]
        }
      },
      // 响应及时率趋势
      responseMonth: {
        borderConfig: {
          titleText: '响应及时率趋势',
          moduleType: '43x1',
          ref: 'responseMonth'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              yAxisConversion: '%', // Y轴坐标%
              xAxisDataType: 2 // X轴坐标从1月份开始
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              isNamePreposition: false,
              tipsMessage: '员工报单响应及时率'
            },
            grid: {
              top: 40
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 0 }, { name: new Date().getFullYear(), colorIndex: 1 }]
        }
      },
      // 结单率趋势
      overRateMonth: {
        borderConfig: {
          titleText: '结单率趋势',
          moduleType: '43x1',
          ref: 'overRateMonth'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              yAxisConversion: '%', // Y轴单位
              xAxisDataType: 2 // X轴坐标从1月份开始
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              isNamePreposition: false,
              tipsMessage: '员工报单结单率'
            },
            grid: {
              top: 40
            },
            seriesData: []
          },
          legendDirection: 'level',
          legendList: [{ name: new Date().getFullYear() - 1, colorIndex: 0 }, { name: new Date().getFullYear(), colorIndex: 1 }]
        }
      },
      // 工单数量对比
      employeeOrgan: {
        borderConfig: {
          titleText: '工单数量对比',
          moduleType: '43x1',
          ref: 'employeeOrgan'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisNameLength: 8
              // yAxisConversion: '%' // Y轴坐标%
            },
            xAxis: {
              axisLabel: {
                rotate: 30
              },
              data: []
            },
            yAxis: {
              minInterval: 10
            },
            tooltipsConfig: {
              // symbol: '万元',
              // tipsColor: ['#b60d81'],
              isNamePreposition: true
            },
            grid: {
              top: 40,
              bottom: 0
            },
            dataZoom: {
              show: true,
              left: '50%'
            },
            seriesData: []
          }
        },
        isShowDimension: true
      },
      // 响应及时率对比
      responseOrgan: {
        borderConfig: {
          titleText: '响应及时率对比',
          moduleType: '43x1',
          ref: 'responseOrgan'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisNameLength: 8,
              yAxisConversion: '%' // Y轴坐标%
            },
            xAxis: {
              axisLabel: {
                rotate: 30
              },
              data: []
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              tipsColor: ['#b60d81'],
              isNamePreposition: true
            },
            grid: {
              top: 40,
              bottom: 0
            },
            dataZoom: {
              show: true,
              left: '50%'
            },
            seriesData: []
          }
        },
        isShowDimension: true
      },
      // 结单率对比
      overRateOrgan: {
        borderConfig: {
          titleText: '结单率对比',
          moduleType: '43x1',
          ref: 'overRateOrgan'
        },
        moduleConfig: {
          optionsConfig: {
            axis: {
              xAxisNameLength: 8,
              yAxisConversion: '%' // Y轴坐标%
            },
            xAxis: {
              axisLabel: {
                rotate: 30
              },
              data: []
            },
            yAxis: {
              max: 100
            },
            tooltipsConfig: {
              symbol: '%',
              tipsColor: ['#f29f46'],
              isNamePreposition: true
            },
            grid: {
              top: 40,
              bottom: 0
            },
            dataZoom: {
              show: true,
              left: '50%'
            },
            seriesData: []
          }
        },
        isShowDimension: true
      }
    }
  },
  methods: {
    showTips (data) {
      this.$parent.showTips(data)
    },
    // 改变时间维度时
    changeDimension (obj) {
      switch (obj.ref) {
        case 'employeeOrgan': this.getServiceOrderInfoByChildNode('employeeOrgan', obj.index + 1)
          break
        case 'responseOrgan': this.getTimeTacheInfoByChildNode(obj.index + 1)
          break
        case 'overRateOrgan': this.getServiceOrderInfoByChildNode('overRateOrgan', obj.index + 1)
          break
      }
    },
    // 今日/本月工单类型
    getTemplateTypeDistribute (type = 0) {
      this.employeeApi.getTemplateTypeDistribute({ organId: this.organId, timeDimension: type, dataScope: 3 }).then(res => {
        let value = []
        let legend = []
        let legendList = []
        let data = []
        if (res.data.code === '0') {
          data = res.data.data.distribute
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        data.forEach((item, index) => {
          value.push(item.count)
          legend.push(item.templateName)
          legendList.push(item.templateName)
        })
        if (legendList.length > 8) {
          legendList.splice(7, legendList.length - 7, '其余类型')
        }
        if (type === 0) {
          this.todayEmployee.moduleConfig.optionsConfig.value = value
          this.todayEmployee.moduleConfig.optionsConfig.legend = legend
          this.todayEmployee.moduleConfig.legendList = legendList
        } else {
          this.monthEmployee.moduleConfig.optionsConfig.value = value
          this.monthEmployee.moduleConfig.optionsConfig.legend = legend
          this.monthEmployee.moduleConfig.legendList = legendList
        }
      }, res => {
        if (type === 0) {
          this.todayEmployee.moduleConfig.optionsConfig.value = []
          this.todayEmployee.moduleConfig.optionsConfig.legend = []
          this.todayEmployee.moduleConfig.legendList = []
        } else {
          this.monthEmployee.moduleConfig.optionsConfig.value = []
          this.monthEmployee.moduleConfig.optionsConfig.legend = []
          this.monthEmployee.moduleConfig.legendList = []
        }
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 工单数量趋势/结单率
    getServiceOrderInfoByYearOnMonth () {
      this.employeeApi.getServiceOrderInfoByYearOnMonth({ organId: this.organId, dataScope: 3 }).then(res => {
        let data1 = [[], []]
        let data2 = [[], []]
        if (res.data.code === '0') {
          data1 = changeBarData(res.data.data, 'orderTotal')
          data2 = changeBarData(res.data.data, 'overRate')
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this.employeeMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: data1[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0,
            isBar: true
          },
          {
            data: data1[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1,
            isBar: true
          }
        ]
        this.overRateMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: data2[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: data2[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
      }, res => {
        this.employeeMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0,
            isBar: true
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1,
            isBar: true
          }
        ]
        this.overRateMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 响应及时率
    getTimeTacheInfoByYearOnMonth () {
      this.employeeApi.getTimeTacheInfoByYearOnMonth({ organId: this.organId, dataScope: 3 }).then(res => {
        let data = [[], []]
        if (res.data.code === '0') {
          data = changeBarData(res.data.data, 'disTimelyRate')
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this.responseMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: data[0],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: data[1],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
      }, res => {
        this.responseMonth.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: new Date().getFullYear() - 1 + '年',
            colorIndex: 0
          },
          {
            data: [],
            name: new Date().getFullYear() + '年',
            colorIndex: 1
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 工单数量趋势/结单率对比
    getServiceOrderInfoByChildNode (type, timeDimensionIndex) {
      let timeDimension = 1
      if (timeDimensionIndex) {
        timeDimension = timeDimensionIndex
      }
      this.employeeApi.getServiceOrderInfoByChildNode({ organId: this.organId, timeDimension: timeDimension, dataScope: 3 }).then(res => {
        let data = []
        let name = []
        if (res.data.code === '0') {
          let params = type === 'employeeOrgan' ? 'orderTotal' : 'overRate'
          let obj = separateData(res.data.data, params)
          data = obj.data
          name = obj.tipsName
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        if (type === 'employeeOrgan') {
          this.employeeOrgan.moduleConfig.optionsConfig.xAxis.data = name
          this.employeeOrgan.moduleConfig.optionsConfig.seriesData = [
            {
              data: data,
              name: '员工报单',
              colorIndex: 0,
              isBar: true
            }
          ]
        } else {
          this.overRateOrgan.moduleConfig.optionsConfig.xAxis.data = name
          this.overRateOrgan.moduleConfig.optionsConfig.seriesData = [
            {
              data: data,
              name: '员工报单结单率',
              colorIndex: 2,
              isBar: true
            }
          ]
        }
      }, res => {
        if (type === 'employeeOrgan') {
          this.employeeOrgan.moduleConfig.optionsConfig.xAxis.data = []
          this.employeeOrgan.moduleConfig.optionsConfig.seriesData = [
            {
              data: [],
              name: '员工报单',
              colorIndex: 0,
              isBar: true
            }
          ]
        } else {
          this.overRateOrgan.moduleConfig.optionsConfig.xAxis.data = []
          this.overRateOrgan.moduleConfig.optionsConfig.seriesData = [
            {
              data: [],
              name: '员工报单结单率',
              colorIndex: 2,
              isBar: true
            }
          ]
        }
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 响应及时率对比
    getTimeTacheInfoByChildNode (timeDimensionIndex) {
      let timeDimension = 1
      if (timeDimensionIndex) {
        timeDimension = timeDimensionIndex
      }
      this.employeeApi.getTimeTacheInfoByChildNode({ organId: this.organId, timeDimension: timeDimension, dataScope: 3 }).then(res => {
        let data = []
        let name = []
        if (res.data.code === '0') {
          let obj = separateData(res.data.data, 'disTimelyRate')
          data = obj.data
          name = obj.tipsName
        } else {
          this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
        }
        this.responseOrgan.moduleConfig.optionsConfig.xAxis.data = name
        this.responseOrgan.moduleConfig.optionsConfig.seriesData = [
          {
            data: data,
            name: '员工报单响应及时率',
            colorIndex: 1,
            isBar: true
          }
        ]
      }, res => {
        this.responseOrgan.moduleConfig.optionsConfig.xAxis.data = []
        this.responseOrgan.moduleConfig.optionsConfig.seriesData = [
          {
            data: [],
            name: '员工报单响应及时率',
            colorIndex: 1,
            isBar: true
          }
        ]
        this.showTips({ showMessage: '请求失败，点击确认继续刷新', sureCallback: this.getData })
      })
    },
    // 请求数据
    getData () {
      this.getTemplateTypeDistribute(0)
      this.getTemplateTypeDistribute(2)
      this.getServiceOrderInfoByYearOnMonth()
      this.getTimeTacheInfoByYearOnMonth()
      this.getServiceOrderInfoByChildNode('employeeOrgan')
      this.getTimeTacheInfoByChildNode()
      this.getServiceOrderInfoByChildNode('overRateOrgan')
    },
    resizeChart () {
      this.$refs.module.resizeChart()
      this.$refs.module1.resizeChart()
      this.$refs.module2.resizeChart()
      this.$refs.module3.resizeChart()
      this.$refs.module4.resizeChart()
      this.$refs.module5.resizeChart()
      this.$refs.module6.resizeChart()
      this.$refs.module7.resizeChart()
    }
  },
  mounted () {
    // this.getData()
  }
}
</script>

<style lang="scss" scoped>
  .employee{
    width: calc(100% - 10px);
    position: relative;
    margin: 5px;
    overflow: hidden;
    moz-user-select: -moz-none;
    -moz-user-select: none;
    -o-user-select:none;
    -khtml-user-select:none;
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none;
  }
</style>
